<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="source/plugins/bootstrap/3.3/bootstrap.min.css">
    <link rel="stylesheet" href="source/plugins/datatable/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" href="source/plugins/layer/skin/default/layer.css">
    <link rel="stylesheet" href="source/plugins/datepicker/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="source/css/custom.css">
    <link rel="stylesheet" href="source/css/default.css">
</head>
<body>
<div class="row">
    <div class="col-md-1"></div>
    <div class="col-md-10">
        <div class="col-md-12">
            <div class="x_panel">
                <div class="x_title">
                    <h2>库存管理</h2>
                    <div class="clearfix"></div>
                </div>
                <div class="x_content">
                    <div class="row" style="margin-top: 20px">
                        <div class="col-md-12">
                            <div class="text-left col-md-6">
                                <button type="button" class="btn btn-primary"
                                        data-toggle="modal"
                                        data-target=".bs-trade-add-modal-lg" style="padding: 6px 48px">
                                    追加
                                </button>
                            </div>
                            <div class="text-right col-md-6">
                                <a class="btn btn-primary" href="view_type.php" >货物种类管理</a>
                            </div>
                        </div>
                    </div>
                    <div class="row ">
                        <table id="tradeGoodsInfo"
                               class="col-md-12 table table-striped table-bordered "></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-1"></div>
</div>
<div class="modal fade bs-trade-edit-modal-lg" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal form-label-left" id="goods-info-edit-form" novalidate="">

                    <input type="hidden" id="edit-uuid" name="uuid">
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12 customer-margin-right">类型
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12 customer-type-selector">

                        </div>
                        <label style="color: red;margin:5px;">*</label>
                    </div>
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12 customer-margin-right">名称
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <input type="text" id="edit_name" name="name" required="required" maxlength="200"
                                   class="form-control col-md-7 col-xs-12">
                        </div>
                        <label style="color: red;margin:5px;">*</label>
                    </div>
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12 customer-margin-right">条形码
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <input type="text" id="edit_qr_code" name="qr_code"
                                   required="required" class="form-control col-md-7 col-xs-12">
                        </div>
                        <label style="color: red;margin:5px;">*</label>
                    </div>
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12 customer-margin-right">到货日期
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <div class="input-group date form_date col-md-12" data-date=""
                                 data-date-format="yyyy-MM-dd hh:mm:ss" data-link-field="arrived_time">
                                <input class="form-control" size="16" id="edit_arrived_time" type="text" readonly=""
                                       name="arrived_time" value="" >
                                <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                                <span class="input-group-addon"><span
                                        class="glyphicon glyphicon-calendar"></span></span>
                            </div>
                        </div>
                        <label style="color: red;margin:5px;">*</label>
                    </div>
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12 customer-margin-right">进货日期
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <div class="input-group date form_date col-md-12" data-date=""
                                 data-date-format="yyyy-MM-dd hh:mm:ss" data-link-field="purchase_time">
                                <input class="form-control" size="16" type="text" id="edit_purchase_time"readonly=""
                                       name="purchase_time" value="" >
                                <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                                <span class="input-group-addon"><span
                                        class="glyphicon glyphicon-calendar"></span></span>
                            </div>
                        </div>
                        <label style="color: red;margin:5px;">*</label>
                    </div>
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12 customer-margin-right">生产日期
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <div class="input-group date form_date col-md-12" data-date=""
                                 data-date-format="yyyy-MM-dd hh:mm:ss" data-link-field="produce_time">
                                <input class="form-control" size="16" id="edit_produce_time" name="produce_time"readonly=""
                                       type="text" value="" >
                                <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                                <span class="input-group-addon"><span
                                        class="glyphicon glyphicon-calendar"></span></span>
                            </div>
                        </div>
                        <label style="color: red;margin:5px;">*</label>
                    </div>
                    <div class="item form-group">
                        <label class="control-label col-md-3 customer-margin-right">到期日期</label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <div class="input-group date form_date col-md-12" data-date=""
                                 data-date-format="yyyy-MM-dd hh:mm:ss" data-link-field="expire_time">
                                <input class="form-control" size="16" id="edit_expire_time" type="text" value=""readonly=""
                                       name="expire_time" >
                                <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                                <span class="input-group-addon"><span
                                        class="glyphicon glyphicon-calendar"></span></span>
                            </div>
                        </div>
                        <label style="color: red;margin:5px;">*</label>
                    </div>
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12 customer-margin-right">库存</label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <input id="edit_count" type="text" name="count"
                                   class="form-control col-md-7 col-xs-12" required="required" maxlength="8">
                        </div>
                        <label style="color: red;margin:5px;">*</label>
                    </div>
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12 customer-margin-right">备注
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <input type="text" id="edit_comment" name="comment" class="form-control col-md-7 col-xs-12"
                                   maxlength="200">
                        </div>
                        <label style="color: red;margin:5px;">*</label>
                    </div>

                    <div class="ln_solid"></div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" onclick="updateData(this)" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade bs-trade-add-modal-lg" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal form-label-left" id="goods-info-regist-form" novalidate="">
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12 customer-margin-right">类型
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12 customer-type-selector">

                        </div>
                        <label style="color: red;margin:5px;">*</label>
                    </div>
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12 customer-margin-right">名称
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <input type="text" id="add_name" name="name" required="required" maxlength="200"
                                   class="form-control col-md-7 col-xs-12">
                        </div>
                        <label style="color: red;margin:5px;">*</label>
                    </div>
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12 customer-margin-right">条形码
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <input type="text" id="add_qr_code" name="qr_code"
                                   required="required" class="form-control col-md-7 col-xs-12">
                        </div>
                        <label style="color: red;margin:5px;">*</label>
                    </div>
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12 customer-margin-right">到货日期
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">

                            <div class="input-group date form_date col-md-12" data-date=""
                                 data-link-field="arrived_time">
                                <input class="form-control " id="add_arrived_time" type="text" name="arrived_time"readonly="">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                                <span class="input-group-addon"><span
                                        class="glyphicon glyphicon-calendar"></span></span>
                            </div>
                        </div>
                        <label style="color: red;margin:5px;">*</label>
                    </div>
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12 customer-margin-right">进货日期
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <div class="input-group date form_date col-md-12" data-date=""
                                 data-link-field="purchase_time">
                                <input class="form-control " type="text" id="add_purchase_time" name="purchase_time"readonly="">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                                <span class="input-group-addon"><span
                                        class="glyphicon glyphicon-calendar"></span></span>
                            </div>
                        </div>
                        <label style="color: red;margin:5px;">*</label>
                    </div>
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12 customer-margin-right">生产日期
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <div class="input-group date form_date col-md-12" data-date=""
                                 data-link-field="produce_time">
                                <input class="form-control " id="add_produce_time" name="produce_time" type="text"readonly="">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                                <span class="input-group-addon"><span
                                        class="glyphicon glyphicon-calendar"></span></span>
                            </div>
                        </div>
                        <label style="color: red;margin:5px;">*</label>
                    </div>
                    <div class="item form-group">
                        <label class="control-label col-md-3 customer-margin-right">到期日期</label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <div class="input-group date form_date col-md-12" data-date=""
                                 data-link-field="expire_time">
                                <input class="form-control " id="add_expire_time" type="text" value="" readonly=""
                                       name="expire_time">
                                <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
                                <span class="input-group-addon"><span
                                        class="glyphicon glyphicon-calendar"></span></span>
                            </div>
                        </div>
                        <label style="color: red;margin:5px;">*</label>
                    </div>
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12 customer-margin-right">库存</label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <input id="add_count" type="text" name="count"
                                   class="form-control col-md-7 col-xs-12" required="required" maxlength="8">
                        </div>
                        <label style="color: red;margin:5px;">*</label>
                    </div>
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12 customer-margin-right">备注
                        </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <input type="text" id="add_comment" name="comment" class="form-control col-md-7 col-xs-12"
                                   maxlength="200">
                        </div>
                        <label style="color: red;margin:5px;">*</label>
                    </div>

                    <div class="ln_solid"></div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" onclick="registData()" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>


<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="source/plugins/jquery/js/jquery-1.10.2.min.js"></script>
<script src="source/plugins/jquery/js/jquery.validate.min.js"></script>
<script src="source/plugins/jquery/js/messages_jp.js"></script>
<script src="source/plugins/bootstrap/3.3/bootstrap.min.js"></script>
<script src="source/plugins/datatable/js/jquery.dataTables.min.js"></script>
<script src="source/plugins/datatable/js/dataTables.bootstrap.min.js"></script>
<script src="source/plugins/datepicker/bootstrap-datetimepicker.js"></script>
<script src="source/plugins/layer/layer.js"></script>
<script src="source/js/index.js"></script>
<script src="source/js/goods.js"></script>
<script>
  $(function () {
    getTypeInfo();
    resetValidate("goods-info-regist-form");
    refreshGoodsInfoList();
  })


  function initTable() {
    tradeGoodsInfo = $('#tradeGoodsInfo').DataTable({
      dom: '<"top">rt<"bottom"lp><"clear">',
      autoWidth: false,
      scrollCollapse: false,
      paginate: true,
      info: false,
      filter: true,
      ordering: false,
      order: [[0, 'desc']],
      serverSide: false,
      pageLength: 10,
      ajax: {
        url: "view/api/get_goods_info_api.php"
      },
      columns: [{
        width: '5%',
        title: "項番",
        data: "uuid",
        render: function (data, type, full, meta) {
          return meta.row + 1;
        }
      }, {
        width: '5%',
        title: "类型",
        data: "type_name"
      }, {
        width: '10%',
        title: "名称",
        data: "name"
      }, {
        width: '10%',
        title: "条形码",
        data: "qr_code"
      }, {
        width: '10%',
        title: "到货日期",
        data: "arrived_time",
        render: function (data, type, full, meta) {
          return data;
        }
      }, {
        width: '10%',
        title: "进货日期",
        data: "purchase_time",
        render: function (data, type, full, meta) {
          return data;
        }
      }, {
        width: '10%',
        title: "生产日期",
        data: "produce_time",
        render: function (data, type, full, meta) {
          return data;
        }
      }, {
        width: '10%',
        title: "到期日期",
        data: "expire_time",
        render: function (data, type, full, meta) {
          var onlyDays = dataCompare(full.produce_time, data);
          if (onlyDays < 30) {
            return '<p style="color: red">' + data + '<br>(剩余: ' + onlyDays + ' 天)</p>';
          }
          return data;
        }
      }, {
        width: '5%',
        title: "库存",
        data: "count",
        render: function (data, type, full, meta) {
          if (data < 5) {
            return '<p style="color: red">' + data + '</p>';
          }
          else {
            return data;
          }
        }
      }, {
        width: '10%',
        title: "备注",
        data: "comment"
      }, {
        width: '10%',
        title: "操作",
        data: "",
        render: function (data, type, full, meta) {
          var html =
              '<div class="col-md-12" >' +
              '<div class="col-md-6"><input type="button" class="btn btn-primary customer-edit" ' +
              'data-uuid="' + full.uuid +
              '"data-name="' + full.name +
              '"data-qr-code="' + full.qr_code +
              '"data-arrived-time="' + full.arrived_time +
              '"data-purchase-time="' + full.purchase_time +
              '"data-produce-time="' + full.produce_time +
              '"data-expire-time="' + full.expire_time +
              '"data-count="' + full.count +
              '"data-comment="' + full.comment +
              '"data-row="' + meta.row +
              '"data-toggle="modal" data-target=".bs-trade-edit-modal-lg" onclick="actions(this)" value="編集"/></div>' +
              '<div class="col-md-6"><input type="button" class="btn btn-warning customer-delete"  data-uuid="' + full.uuid + '" data-row="' + meta.row + '" onclick="actions(this)"  value="削除"/></div>' +
              '</div> ';
          return html;
        }
      }], rowCallback: function (row, data, index) {

      }, drawCallback: function (settings) {

      }, initComplete: function (settings, json) {

      }
    });
  }
</script>
</body>
</html>